<template>
  <div class="min-h-screen bg-gray-200">
    <!-- 顶部导航 -->
    <HeaderNav />
    <!-- 主体内容 -->
    <div class="bg-indigo-900">
      <div class="container mx-auto pt-4 px-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-2">
            <div class="bg-white p-2 rounded-lg">
              <el-image
                :src="shopInfo.logo"
                class="w-12 h-12 object-cover"
                fit="cover"
              />
            </div>
            <div class="text-white flex items-center space-x-2">
              <h1 class="text-4xl font-bold mb-2">{{ shopInfo.name }}</h1>
              <div>
                <div class="flex items-center">
                  <img src="@/assets/image/level/s_9.png" class="h-4" />
                  <div class="text-sm">
                    【{{ shopInfo.abbreviation }}】仅为该商户在本平台的简称
                  </div>
                </div>
                <div class="flex items-center space-x-2 mt-1">
                  <span class="text-yellow-400 bg-black text-sm p-0.5 rounded"
                    >支持上门拿货</span
                  >
                  <span class="text-yellow-400 bg-black text-sm p-0.5 rounded"
                    >营业执照</span
                  >
                  <span
                    class="text-red-400 bg-black text-sm p-0.5 rounded"
                    v-if="shopInfo.isDropOne"
                    >支持一件代发</span
                  >
                  <div
                    class="text-sm bg-red-400 rounded-lg flex items-center justify-end"
                  >
                    <img src="/src/assets/image/bond.png" />
                    <div
                      class="bg-white text-red-400 text-xs px-1 h-6 flex items-center rounded-r-lg"
                    >
                      <span>已缴纳保障金2000元</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-white text-end">
            <div v-show="isShowPhone">
              电话：<template v-for="(item, index) in shopInfo.phone"
                >{{ item }}&nbsp;</template
              >
              微信：{{ shopInfo.wx }}
            </div>
            <button
              class="border text-gray-400 px-2 py-1 text-sm rounded-md"
              @click="isShowPhone = !isShowPhone"
              v-show="!isShowPhone"
            >
              点击显示手机号/微信
            </button>
            <p v-for="(item, index) in shopInfo.address" :key="index">
              拿货点{{ index + 1 }}： {{ item }}
            </p>
            <!-- <p>拿货点2：万商红B41幢18-21号</p> -->
            <p>
              Q Q：<template v-for="(item, index) in shopInfo.qq"
                >{{ item }}&nbsp;</template
              >
            </p>
          </div>
        </div>
        <!-- 二级导航 -->
        <div class="flex items-center justify-between mt-2 py-2">
          <div class="flex items-center space-x-1">
            <a
              href="/shopHome/1"
              class="text-white bg-indigo-500 hover:bg-[#d7dafa] hover:text-black px-4 py-1"
            >
              所有产品
            </a>
            <div class="relative">
              <a
                href="#"
                class="text-white hover:bg-[#d7dafa] hover:text-black flex items-center space-x-1 bg-indigo-500 px-4 py-1"
                @mouseenter="isShow = true"
                @mouseleave="isShow = false"
              >
                产品分类
                <el-icon>
                  <ArrowDownBold />
                </el-icon>
              </a>
              <div
                class="absolute text-left z-40 top-8 p-2.5 w-auto max-w-[472px] whitespace-nowrap text-black bg-[#d7dafa]"
                v-show="isShow"
                ref="dropdownRef"
                @mouseleave="isShow = !isShow"
              >
                <template v-for="(item, index) in categoryTabs" :key="index">
                  <a
                    :href="`/shopHome/${shopInfo.id}/${item.id}`"
                    class="inline-block w-[108px] m-[5px] p-0 border-0 text-sm h-[25px] leading-[25px] text-black rounded-[3px] bg-white hover:text-gray-400"
                  >
                    {{ item.text }}{{ item.count }}
                  </a>
                  <br v-if="(index + 1) % 3 == 0" />
                </template>
              </div>
            </div>
            <a
              href="#"
              class="text-black border-b-2 border-white bg-white px-4 py-1"
              >商品详情</a
            >
          </div>
          <div class="flex items-center text-white">
            <button
              class="!rounded-button whitespace-nowrap border py-1 rounded text-sm w-24 hover:text-gray-400"
            >
              关注商家
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 mb-6 bg-white">
      <div class="flex gap-6 mx-6">
        <!-- 左侧商品展示 -->
        <div class="w-4/5">
          <div class="bg-white p-4 mb-6">
            <div class="flex gap-6">
              <div class="relative">
                <!-- 商品主图 -->
                <div
                  class="w-[400px] h-[400px] overflow-hidden rounded-lg relative"
                  ref="target"
                >
                  <img
                    :src="currentImage"
                    class="w-full h-full object-cover"
                    alt="商品主图"
                  />
                  <!-- 蒙层小滑块 -->
                  <div
                    class="layer"
                    v-show="!isOutside && !isShow"
                    :style="{ left: `${left}px`, top: `${top}px` }"
                  ></div>
                </div>
                <!-- 放大镜大图 -->
                <div
                  class="large"
                  :style="[
                    {
                      backgroundImage: `url(${thumbnails[currentIndex]})`,
                      backgroundPositionX: `${positionX}px`,
                      backgroundPositionY: `${positionY}px`,
                    },
                  ]"
                  v-show="!isOutside && !isShow"
                ></div>
                <!-- 商品缩略图 -->
                <div class="flex justify-between gap-4 mt-4">
                  <div
                    v-for="(thumb, index) in thumbnails"
                    :key="index"
                    class="w-20 h-20 rounded-lg overflow-hidden cursor-pointer border-2"
                    :class="
                      currentIndex === index
                        ? 'border-orange-500'
                        : 'border-transparent'
                    "
                    @mouseenter="currentIndex = index"
                  >
                    <img
                      :src="thumb"
                      class="w-full h-full object-cover"
                      alt="商品缩略图"
                    />
                  </div>
                </div>
                <!-- 功能按钮 -->
                <div class="mt-4 flex gap-4">
                  <button
                    class="flex items-center gap-2 hover:text-gray-400 text-orange-500 !rounded-button whitespace-nowrap"
                    v-if="productInfo.hasVideo"
                    @click="downloadVideo"
                  >
                    <el-icon>
                      <Download />
                    </el-icon>
                    下载视频
                  </button>
                  <button
                    class="flex items-center gap-2 hover:text-gray-400 text-orange-500 !rounded-button whitespace-nowrap"
                  >
                    <el-icon>
                      <Star />
                    </el-icon>
                    收藏
                  </button>
                  <button
                    class="flex items-center gap-2 hover:text-gray-400 text-orange-500 !rounded-button whitespace-nowrap"
                  >
                    <el-icon>
                      <InfoFilled />
                    </el-icon>
                    盗图投诉
                  </button>
                </div>
              </div>
              <!-- 商品信息 -->
              <div class="flex-1">
                <div class="flex items-center">
                  <h1 class="text-2xl font-bold mb-2 mr-2">
                    货号：{{ productInfo.itemCode }}
                  </h1>
                  <el-icon>
                    <CopyDocument />
                  </el-icon>
                  <span
                    class="ml-1 text-gray-400 text-sm cursor-pointer"
                    @click="copyText(productInfo.itemCode)"
                    >复制</span
                  >
                </div>
                <p class="text-orange-500 text-sm mb-4">
                  1比1原版开模，聚氨酯鞋底，质量好退货少，卖不完包退
                </p>
                <div v-if="userStore.isLogin">
                  <div
                    class="bg-gray-50 p-4 rounded-lg mb-4 flex items-center justify-between"
                  >
                    <div
                      class="text-sm mb-1 text-gray-400 flex items-center gap-2"
                    >
                      拿货价:<span class="text-red-500 font-bold"
                        >¥{{ productInfo.purchasePrice }}</span
                      >
                      订货价:<span class="text-red-500 font-bold"
                        >¥{{ productInfo.orderPrice }}</span
                      >
                      起订数:<span class="text-red-500 font-bold"
                        >{{ productInfo.minNum }}(需预订)</span
                      >
                    </div>
                    <div class="text-gray-500 text-sm bg-white p-2">
                      {{ productInfo.uploadTime }}天前上传
                    </div>
                  </div>
                  <div class="mb-4 flex items-center">
                    <p class="text-sm text-gray-400">
                      服务：
                      <!-- 价格不含税 · 知识产权 · 代发服务 · 库存问题 · 退换政策
                    · 凭证说明 -->
                    </p>
                    <div
                      class="flex flex-wrap item-center justify-center relative space-x-2 text-sm"
                    >
                      <template v-for="item in productInfo.service">
                        <span class="text-gray-400">{{ item }}</span>
                        <span class="h-1 w-1 bg-gray-400 my-2 rounded"></span>
                      </template>
                      <span
                        href="#"
                        class="text-blue-500"
                        @click="isCatDetail = true"
                        >查看详情 ></span
                      >
                      <div
                        v-show="isCatDetail"
                        @mouseleave="isCatDetail = false"
                        class="shadow-[0_1px_6px_0_rgba(50,50,50,0.3)] bg-white p-[15px] leading-[1.7] text-[#333] w-[350px] absolute top-[25px] left-25 z-[99] rounded-[8px] max-h-[300px] overflow-y-auto"
                      >
                        <h4 class="font-bold mt-[5px] mb-[3]">价格不含税</h4>
                        <p>当前展示的价格为不含税价格</p>
                        <h4 class="font-bold mt-[5px] mb-[3]">知识产权</h4>
                        <p>
                          (含图片、视频、压缩包)均为厂家自行上传或网络抓取，本平台不生产或销售该产品，如有侵权请联系4006266818客服电话/QQ，我们将根据《电子商务法》规定的流程处理。
                        </p>
                        <h4 class="font-bold mt-[5px] mb-[3]">代发服务</h4>
                        <p>
                          为了资金安全，建议使用平台第三方代发团队通过平台代发系统下单发货或自行上门拿货，切勿私下转账给商家(商家可能因为生意较忙而无法按您的要求及时发货或处理售后)。用户委托代发团队拿货过程中，用户的角色为零售商/中间批发商，供货商家的角色为批发商，除非代发明确声明代销，否则代发团队并非该商品的销售者，其职责仅限从商家取货到交付快递。
                        </p>
                        <h4 class="font-bold mt-[5px] mb-[3]">库存问题</h4>
                        <p>
                          由于商家热销爆款及换季停产时可能会发生部分尺码颜色短时缺货的情况，如对发货时效性要求较高建议囤货后再销售，否则可能会出现售出后无法及时拿到货的情况。
                        </p>
                        <h4 class="font-bold mt-[5px] mb-[3]">退换政策</h4>
                        <p>
                          本平台是货源批发展示平台，非商品销售平台，部分商家不适用普通零售电商平台的七天无理由退换政策，请谨慎下单!
                        </p>
                        <h4 class="font-bold mt-[5px] mb-[3]">凭证说明</h4>
                        <p>
                          本平台是货源批发展示平台，非商品销售平台，三包法规范的是销售者与消费者之间的关系，卖家需自行提供相关凭证给消费者，平台卖家与供货商家是零售商/中间批发商与批发商之间的关系，除非特别约定，批发商默认供货不提供相应的三包凭证，请知悉!
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="mb-4 flex gap-6">
                    <p class="text-sm">
                      <span class="text-gray-400">类型：</span
                      >{{ productInfo.type }}
                    </p>
                    <p class="text-sm">
                      <span class="text-gray-400">货源：</span
                      >{{ productInfo.source }}
                    </p>
                  </div>

                  <div class="mb-4 flex items-center">
                    <p class="text-sm text-gray-400 mb-2">尺码：</p>
                    <div class="flex">
                      <div
                        v-for="size in productInfo.sizes"
                        :key="size"
                        class="w-12 h-8 text-center bg-gray-50 border border-gray-200 flex items-center justify-center text-sm mx-0.5 cursor-pointer"
                        :class="{
                          'border-orange-500 text-orange-500':
                            selectedSize === size,
                        }"
                        @click="selectSize(size)"
                      >
                        {{ size }}
                      </div>
                    </div>
                  </div>
                  <!-- 颜色选择 -->
                  <div class="mb-4 flex gap">
                    <p class="text-sm text-gray-400 mb-2">颜色：</p>
                    <div class="flex border-1 border-gray-300 w-11/12 p-1">
                      <div
                        v-for="color in productInfo.colors"
                        :key="color.id"
                        class="w-16 h-20 border border-gray-200 flex items-center flex-col text-sm mx-0.5 rounded cursor-pointer"
                        :class="{
                          'border-orange-500': selectedColor === color.id,
                        }"
                        @click="selectColor(color.id)"
                      >
                        <img
                          :src="color.img"
                          :alt="color.name"
                          class="w-16 h-16 object-cover"
                        />
                        <div
                          class="text-center text-xs hover:border-orange-500"
                        >
                          {{ color.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="!userStore.isLogin"
                  class="bg-gray-100 p-30 flex flex-col items-center justify-center gap-6"
                >
                  <div class="text-center text-xl text-orange-500">
                    登录账号后查看所有内容
                  </div>
                  <a href="/login" class="text-white bg-orange-500 px-6 py-2"
                    >登录</a
                  >
                </div>
                <!-- 人气 下载 发布等信息 -->
                <div
                  class="flex items-center justify-between bg-gray-50 p-4 mb-4"
                >
                  <div class="flex items-center space-x-4">
                    <div>
                      <p class="text-sm">
                        总人气:
                        <span class="text-orange-500">{{
                          productInfo.popularity
                        }}</span>
                        下载:
                        <span class="text-orange-500">{{
                          productInfo.download
                        }}</span>
                        发布:
                        <span class="text-orange-500">{{
                          productInfo.publish
                        }}</span>
                      </p>
                    </div>
                    <el-select
                      class="w-32"
                      placeholder="查看"
                      size="small"
                      style="width: 80px"
                    >
                      <!-- <el-option v-for="item in productInfo.apps" :key="item.name" :label="item.appName"
                        :value="item" /> -->
                      <el-option
                        label="发布到拼多多:10人次"
                        value="1"
                      ></el-option>
                      <el-option label="发布到淘宝:4人次" value="2"></el-option>
                      <el-option label="发布到抖音:4人次" value="3"></el-option>
                    </el-select>
                  </div>
                  <div
                    class="flex justify-between items-center text-sm text-gray-400"
                  >
                    <span class="text-gray-400 mr-2 text-sm">|</span>
                    <div>
                      首发：{{ productInfo.fistTime }} 更新：{{
                        productInfo.updateTime
                      }}
                    </div>
                  </div>
                </div>

                <!--按钮区域 -->
                <div class="flex items-center justify-between px-4">
                  <div
                    class="!rounded-button whitespace-nowrap action-button bg-[#fef9f1] border px-4 py-2 text-[#ed8248] border-[#ff6700] relative"
                    @mouseenter="isShowPublishApp = true"
                    @mouseleave="isShowPublishApp = false"
                  >
                    发布到店铺
                    <el-icon>
                      <ArrowDown />
                    </el-icon>
                    <div
                      class="w-[250px] absolute z-[11] -left-px top-[45px] h-auto border border-orange-600 bg-white rounded-sm pb-4 mt-1"
                      v-show="isShowPublishApp"
                    >
                      <i
                        class="w-[7px] h-[7px] border-t border-r border-orange-600 rotate-[-45deg] absolute left-[50px] top-[-5px] bg-white z-[30]"
                      ></i>
                      <span
                        class="p-0 w-[282px] h-4 absolute -left-px -top-2.5 bg-transparent z-[30]"
                      ></span>
                      <a
                        class="text-center px-2.5 pt-2.5 relative float-left"
                        href="#"
                        v-for="item in publishAPP"
                        :key="item.id"
                      >
                        <img :src="item.imgUrl" class="w-[40px]" />
                        <img
                          class="absolute -top-[10px] right-[10px] w-[24px]"
                          src="@/assets/image/show/publish/hot.gif"
                          v-if="item.isHot"
                        />
                        <p class="text-gray-400 text-xs leading-[20px]">
                          {{ item.appName }}
                        </p>
                      </a>
                    </div>
                  </div>
                  <a
                    :href="`/download/${route.params.pid}`"
                    target="_blank"
                    class="!rounded-button whitespace-nowrap action-button bg-[#fef9f1] border px-4 py-2 text-[#ed8248] border-[#ff6700]"
                    >下载数据包</a
                  >

                  <div
                    class="!rounded-button whitespace-nowrap action-button bg-[#fef9f1] border px-4 py-2 text-[#ed8248] border-[#ff6700]"
                  >
                    <span>快速发布</span>
                    <el-tag
                      size="small"
                      class="ml-1"
                      type="danger"
                      effect="dark"
                      >NEW</el-tag
                    >
                  </div>
                  <div
                    class="!rounded-button whitespace-nowrap action-button bg-[#fef9f1] border px-4 py-2 text-[#ed8248] border-[#ff6700]"
                  >
                    找代发拿货
                  </div>
                  <!-- <el-button class="!rounded-button whitespace-nowrap">找代发拿货</el-button> -->
                </div>
              </div>
            </div>
          </div>

          <!-- 商品详情 -->
          <div class="bg-white p-4">
            <div class="max-w-7xl mx-auto px-4 py-8">
              <!-- 标签页 -->
              <div class="mb-6 border-b border-gray-200">
                <div class="flex gap-8">
                  <button
                    v-for="tab in tabs"
                    :key="tab.id"
                    @click="activeTab = tab.id"
                    :class="[
                      'pb-4 text-base font-medium relative !rounded-button whitespace-nowrap',
                      activeTab === tab.id
                        ? 'text-red-600'
                        : 'text-gray-600 hover:text-gray-900',
                    ]"
                  >
                    {{ tab.name }}
                    <div
                      v-if="activeTab === tab.id"
                      class="absolute bottom-0 left-0 w-full h-0.5 bg-red-600"
                    ></div>
                  </button>
                </div>
              </div>

              <!-- 内容区域 -->
              <div class="bg-white rounded-lg p-6 shadow-sm">
                <template v-if="activeTab === 'details'">
                  <!-- 商品参数表格 -->
                  <div class="grid grid-cols-4 gap-6">
                    <div
                      v-for="(item, index) in specifications"
                      :key="index"
                      class="flex gap-2"
                    >
                      <span class="text-gray-500">{{ item.label }}：</span>
                      <span class="text-gray-900">{{ item.value }}</span>
                    </div>
                  </div>
                  <!-- 提示信息 -->
                  <div
                    name="downLoadInfo"
                    class="flex items-start gap-2 p-4 bg-orange-50 rounded-lg my-6"
                  >
                    <el-icon color="#FF7f07" class="text-orange-500 mt-1">
                      <InfoFilled />
                    </el-icon>
                    <p class="text-orange-700 text-sm">
                      本页面商品信息是根据商家提供的产品图片、文字描述等部分信息生成。可能与实物存在一定差异，比如面料材质等，请以实物为准。如需获取更准确的产品信息，请联系商家核实。
                    </p>
                  </div>

                  <!-- 商品详情图 -->
                  <div class="mt-8">
                    <span
                      class="bg-red-400 float-left w-1 h-4.5 rounded mt-1 mr-1"
                    ></span>
                    <h3 class="text-lg font-medium mb-4">商品详情图</h3>
                    <div class="mb-1">
                      <img
                        v-for="(detail, index) in detailImages"
                        :key="index"
                        :src="detail"
                        class="w-full rounded-lg"
                        alt="商品详情图"
                      />
                    </div>
                  </div>
                  <div class="flex items-start gap-2 p-4 rounded-lg">
                    <el-icon color="#FF7f07" class="mt-1">
                      <InfoFilled />
                    </el-icon>
                    <p class="text-orange-600 text-sm">
                      若该价格与商品详情价格不一致，请联系商家确认
                    </p>
                  </div>
                </template>
                <template v-else-if="activeTab == 'popularity'">
                  <!-- 商品下载 -->
                  <div
                    class="flex items-start justify-between gap-2 p-4 rounded-lg"
                  >
                    <p class="text-orange-600">
                      产品下载发布记录只显示最近记录，数据每天更新一次。
                    </p>
                    <p class="text-gray-400">
                      只显示最近记录，数据每天更新一次。
                    </p>
                  </div>
                  <div>
                    <el-table
                      :data="productDownloadList"
                      header-row-class-name="orange-header"
                    >
                      <el-table-column
                        prop="username"
                        label="用户名"
                      ></el-table-column>
                      <el-table-column
                        prop="time"
                        label="下载时间"
                      ></el-table-column>
                      <el-table-column
                        prop="type"
                        label="获取方式"
                      ></el-table-column>
                    </el-table>
                  </div>
                </template>

                <template v-else>
                  <div class="text-gray-500 text-center h-[100vh]">
                    暂时无数据
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧推荐 -->
        <div class="w-[300px]">
          <div class="bg-white rounded-lg p-4 mb-6">
            <span
              class="bg-red-400 float-left w-1 h-4.5 rounded mt-1 mr-1"
            ></span>
            <h3 class="text-lg font-medium mb-4">商家推荐款</h3>
            <div class="space-y-4">
              <div
                v-for="(product, index) in recommendations"
                :key="index"
                class="bg-white rounded-lg shadow-sm overflow-hidden"
              >
                <div class="relative aspect-square overflow-hidden">
                  <img
                    :src="product.image"
                    :at="product.name"
                    class="w-80 h-80 object-cover object-top"
                  />
                </div>
                <div class="p-4">
                  <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-400"
                      >拿货咨询：{{ product.phone }}</span
                    >
                  </div>
                  <div class="flex items-center justify-between my-2">
                    <span class="text-red-500 font-semibold"
                      >¥{{ product.price }}</span
                    >
                  </div>
                  <div
                    class="text-sm text-gray-500 border-t border-gray-200 py-2"
                  >
                    {{ product.code }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer2 />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import Footer2 from "@/components/Footer2.vue";
import {
  Search,
  User,
  ShoppingCart,
  Warning,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useMouseInElement } from "@vueuse/core";
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/user";
import HeaderNav from "@/components/HeaderNav.vue";
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
const route = useRoute();
const userStore = useUserStore();
const categoryTabs = ref([]);
//获取所有分类
const getCategory = async () => {
  //获取商品分类数据
  await loadLocalJson("json/merchant/category.json").then((res) => {
    // 计算总数量
    const count1 = res.data.reduce((pre, cur) => {
      return pre + cur.count;
    }, 0);
    console.log(count1);
    categoryTabs.value = [{ text: "全部", count: count1 }, ...res.data];
  });
};
const shopInfo = ref({});
//获取商家信息
const getShopInfo = async () => {
  await loadLocalJson("json/merchant/merchant.json").then((res) => {
    shopInfo.value = res.data;
    localStorage.setItem("shopInfo", JSON.stringify(shopInfo.value));
  });
};
const isShow = ref(false);
// const logoUrl =
//   "https://ai-public.mastergo.com/ai/img_res/cb8f16f01f60bbff27ed2d5c641e6c1f.jpg";

// const mainImage =
//   "https://ai-public.mastergo.com/ai/img_res/ccb790705b4f9ba747de845bc65a94ac.jpg";
const isCatDetail = ref(false);

//缩略图
const thumbnails = ref([]);
const productInfo = ref({});
const currentIndex = ref(0);
// const currentImage = computed(() => thumbnails[currentIndex.value]);
//主图
const currentImage = ref();
watch(currentIndex, (newValue, oldValue) => {
  currentImage.value = thumbnails.value[newValue];
});
//获取商品详情信息
const getProductInfo = async () => {
  await loadLocalJson("json/product/productDetails.json").then((res) => {
    //商品的详细信息
    productInfo.value = res.data;
    //商品缩略图
    thumbnails.value = res.data.thumbnails;
    //当前主图
    currentImage.value = thumbnails.value[0];
    //商品规格
    specifications.value = res.data.specifications;
    //商品详情图
    detailImages.value = res.data.detailImages;
  });
};
const dropdownRef = ref(null);
//获取鼠标的相对位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);

const drowtayge = useMouseInElement(dropdownRef);
// 3. 控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化 重新设置left/top）
const left = ref(0);
const top = ref(0);

const positionX = ref(0);
const positionY = ref(0);
watch([elementX, elementY, isOutside], () => {
  if (isShow.value) {
    return;
  }
  console.log("xy变化了");
  // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑
  if (isOutside.value) return;
  // console.log("后续逻辑执行了");
  // 有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX.value - 100;
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementY.value - 100;
  }

  // 处理边界
  if (elementX.value > 300) {
    left.value = 200;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 300) {
    top.value = 200;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }

  // 控制大图的显示
  positionX.value = -left.value * 2;
  positionY.value = -top.value * 2;
});

//点击下载视频的按钮
const downloadVideo = () => {
  console.log("下载视频");
};
//点击拷贝按钮
const copyText = async (text) => {
  console.log("复制文本", text);
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("产品货号复制成功");
  } catch (err) {
    console.error("复制失败", err);
    ElMessage.error("产品货号复制失败");

    // 备用方法，适用于某些不支持 Clipboard API 的浏览器
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
    ElMessage.success("复制成功");
  }
};
const publishAPP = ref([]);
const isShowPublishApp = ref(false);
//获取到所有的发布到店铺的list
const getPublishAPPList = async () => {
  await loadLocalJson("json/product/publishApp.json").then((res) => {
    publishAPP.value = res.data;
    console.log(publishAPP.value, "apps");
  });
};

const detailImages = ref([]);

const activeTab = ref("details");

const tabs = [
  { id: "details", name: "商品详情" },
  { id: "popularity", name: "商品人气" },
  { id: "complaints", name: "投诉建议" },
];

// 商品规格
const specifications = ref([]);

const selectedColor = ref(null);
const selectedSize = ref("37");
const selectSize = (size) => {
  selectedSize.value = size === selectedSize.value ? null : size;
};
const selectColor = (color) => {
  selectedColor.value = color === selectedColor.value ? null : color;
};
//商家推荐款
const recommendations = ref([]);
const getRecommendations = async () => {
  await loadLocalJson("json/product/recommendProducts.json").then((res) => {
    recommendations.value = res.data;
  });
};
const isShowPhone = ref(false);
//产品下载列表
const productDownloadList = ref([]);
const getProductDownloadList = async () => {
  await loadLocalJson("json/product/productDownload.json").then((res) => {
    productDownloadList.value = res.data;
  });
};

//

onMounted(async () => {
  await getCategory();
  await getShopInfo();
  console.log(categoryTabs.value, shopInfo.value);
  //获取商家推荐款
  await getRecommendations();
  //获取产品下载列表
  await getProductDownloadList();
  //获取产品详情数据
  await getProductInfo();
  // console.log(currentImage.value);
  //获取产品发布到店铺的list
  await getPublishAPPList();
});
</script>

<style scoped>
.product-thumb {
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.product-thumb:hover {
  border-color: #9333ea;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
<style>
/* 表格整体背景色 */
.el-table {
  background-color: #fff7e6 !important; /* 浅黄色背景 */
}

/* 表头样式 */
.orange-header th {
  background-color: #fae8e5 !important; /* 橘色背景 */
  color: #000 !important; /*文字颜色*/
}

/* 可选：hover效果 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #ffefd5 !important;
}
.large {
  position: absolute;
  top: 0;
  left: 412px;
  width: 400px;
  height: 400px;
  z-index: 500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  /* // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position */
  background-size: 800px 800px;
  background-color: #f8f8f8;
}

.layer {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  /* // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来 */
  left: 0;
  top: 0;
  position: absolute;
}
</style>
